---
title: "Justify Content"
# description: "Utilities for controlling how flex and grid items are positioned along a container's main axis."
description: "用于控制 flex 和 grid 项目如何沿着容器的主轴定位的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/justifyContent'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Start

<!-- Use `justify-start` to justify items against the start of the container's main axis: -->
使用 `justify-start` 让项目沿着容器主轴的起点对齐。

```html fuchsia
<template preview class="p-6">
  <div class="flex justify-start -m-2">
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-fuchsia-500 m-2">1</div>
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-fuchsia-500 m-2">2</div>
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-fuchsia-500 m-2">3</div>
  </div>
</template>

<div class="flex **justify-start** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

## Center

<!-- Use `justify-center` to justify items along the center of the container's main axis: -->
使用 `justify-center` 让项目沿着容器主轴的中心点对齐。

```html indigo
<template preview class="p-6">
  <div class="flex justify-center -m-2">
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-indigo-500 m-2">1</div>
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-indigo-500 m-2">2</div>
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-indigo-500 m-2">3</div>
  </div>
</template>

<div class="flex **justify-center** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

## End

<!-- Use `justify-end` to justify items against the end of the container's main axis: -->
使用 `justify-end` 让项目沿着容器主轴的结束点对齐。

```html lightBlue
<template preview class="p-6">
  <div class="flex justify-end -m-2">
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-light-blue-500 m-2">1</div>
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-light-blue-500 m-2">2</div>
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-light-blue-500 m-2">3</div>
  </div>
</template>

<div class="flex **justify-end** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

## Space between

<!-- Use `justify-between` to justify items along the container's main axis such that there is an equal amount of space between each item: -->
使用 `justify-between` 让项目沿着容器主轴排列，并使每个项目之间的距离相等。

```html emerald
<template preview class="p-6">
  <div class="flex justify-between -m-2">
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-emerald-500 m-2">1</div>
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-emerald-500 m-2">2</div>
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-emerald-500 m-2">3</div>
  </div>
</template>

<div class="flex **justify-between** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

## Space around

<!-- Use `justify-around` to justify items along the container's main axis such that there is an equal amount of space on each side of each item: -->
使用 `justify-around` 让项目沿着容器主轴排列，并使每个项目两侧的距离相等。

```html purple
<template preview class="p-6">
  <div class="flex justify-around -m-2">
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-purple-500 m-2">1</div>
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-purple-500 m-2">2</div>
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-purple-500 m-2">3</div>
  </div>
</template>

<div class="flex **justify-around** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

## Space evenly

<!-- Use `justify-evenly` to justify items along the container's main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using `justify-around`: -->
使用 `justify-evenly` 让项目沿着容器主轴排列，并使每个项目周围的距离相等，但不像使用 `justify-around` 时项目之间有双倍的距离。

```html amber
<template preview class="p-6">
  <div class="flex justify-evenly -m-2">
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-amber-500 m-2">1</div>
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-amber-500 m-2">2</div>
    <div class="w-16 h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-amber-500 m-2">3</div>
  </div>
</template>

<div class="flex **justify-evenly** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- ## Responsive -->
## 响应式

<!-- To justify flex items at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:justify-between` to apply the `justify-between` utility at only medium screen sizes and above. -->
要在特定的断点处对 flex 项目应用 justify 功能类，请在任何现有的功能类前添加 `{screen}:` 前缀。例如，使用 `md:justify-between` 来仅在中等尺寸以上的屏幕应用 `justify-between` 功能类。

```html
<div class="justify-start **md:justify-between** ...">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 变体

<Variants plugin="justifyContent" name="justify-content" />

### 禁用

<Disabling plugin="justifyContent" name="justify-content" />
